<!--
 * @Author: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @Date: 2022-12-06 14:09:12
 * @LastEditors: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @LastEditTime: 2022-12-06 16:16:53
 * @FilePath: \project-name\src\components\index\user\UserInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="userinfo">
        <h1>个人信息管理</h1>
        <div class="infoForm">
            <el-form ref="userinfo" label-width="150px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userinfo.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-input v-model="userinfo.gender" readonly></el-input>
                </el-form-item>
                <el-form-item label="出门年月" prop="birth">
                    <el-input v-model="userinfo.birth" readonly></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="userinfo.phone"></el-input>
                </el-form-item>
                <el-form-item label="小区住址" prop="address">
                    <el-input v-model="userinfo.address"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="chang">
            <el-button type="warning" round @click="chang()">
                <span>修改信息</span>
            </el-button>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: "userinfo",
    data() {
        return {
            // userinfo: [],
            userinfo: {
                username: '',
                name: '',
                gender: '',
                birth: '',
                phone: '',
                address: ''
            }
        }
    },
    created() {
        this.userinfo = JSON.parse(this.$route.query.userinfo ? this.$route.query.userinfo : '{}')
        console.log(this.userinfo);
    },
    methods: {
        all() {
            axios.get('http://127.0.0.1/user').then(res => {
                // console.log(res.data);
            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        },
        chang() {
            axios.get('http://127.0.0.1/chang', {
                params: {
                    name: this.userinfo.name,
                    phone: this.userinfo.phone,
                    address: this.userinfo.address,
                }
            }).then(res => {
                // console.log(res.data);
                this.all()
                this.$alert('修改成功', {
                    confirmButtonText: '请重新登录^_^',
                })
                this.$router.push('/login')
            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        }
    }
}
</script>

<style scoped>
.userinfo h1 {
    margin: 20px 70px 30px 0;
}

.userinfo .infoForm {
    margin: 0 auto;
    padding-right: 50px;
    width: 500px;
}

.userinfo .infoForm /deep/.el-form-item__label {
    font-size: 18px;
    font-weight: bold;
}

.userinfo .infoForm /deep/.el-form-item__label::after {
    content: "：";
    font-weight: bold;
}

.userinfo .infoForm /deep/ .el-input__inner[readonly] {
    background-color: #abc;
}

.userinfo .chang {
    margin-right: 30px;
}

.userinfo .chang span {
    font-size: 20px;
    font-weight: bold;
}
</style>